<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text-2{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  </style>
</head>

<body>
  <div id="app">
    <v-app>
      <!-- 侧栏导航 -->
      <v-navigation-drawer app v-model="show" width="80%">  

        <v-toolbar>
          <v-avatar size="33" class="mr-2">
            <img src="http://img0.imgtn.bdimg.com/it/u=3535041290,4164183758&fm=26&gp=0.jpg" alt="">
          </v-avatar>
          <content >
            傻猪猪zzZZ
          </content>
          <v-spacer></v-spacer>
          <v-btn rounded x-small color="black" dark>
            <v-icon x-small>mdi-coin-outline</v-icon>
            签到 </v-btn>
        </v-toolbar>

        <!-- 图标 -->
        <div class="d-flex justify-space-around mt-3 mb-5  align-center">
          <div class="d-flex flex-column align-center" v-ripple >
              <v-icon class="mb-2">mdi-message-processing-outline</v-icon>
              <div style="font-size: xx-small;">我的消息</div>
          </div>
          <div class="d-flex flex-column align-center" v-ripple >
            <v-icon class="mb-2">mdi-account-supervisor-outline</v-icon>
            <div style="font-size: xx-small;">我的好友</div>
        </div>
        <div class="d-flex flex-column align-center" v-ripple >
          <v-icon class="mb-2">mdi-home-outline</v-icon>
          <div style="font-size: xx-small;">个人主页</div>
      </div>
      <div class="d-flex flex-column align-center" v-ripple >
        <v-icon class="mb-2">mdi-purse-outline</v-icon>
        <div style="font-size: xx-small;">个性装扮</div>
    </div>
        </div>
        <v-divider inset></v-divider>

        <v-list v-ripple class="mt-2 mb-2 ml-4">
          <v-icon>mdi-lightbulb-on-outline</v-icon>
          <content style="font-size: small;" class="black--text ml-2">
            创作者中心
          </content>
        </v-list>
        <v-divider inset></v-divider>

        <v-list>
          <v-list-item :key="item.id" v-for="item in list5" style="font-size: small;" v-ripple >
            <v-icon>{{item.name}}</v-icon>
            <v-list-item-content class="black--text ml-2">
               {{item.name1}}
            </v-list-item-content>
            <div class="grey--text darken-3 mr-2" style="font-size: x-small;">{{item.name2}}</div>
          <v-avatar size="25" class="mr-3">
              <v-img :src='item.path'></v-img>
            </v-avatar>
          </v-list-item>
        </v-list>
        <v-divider inset></v-divider>

        <v-list>
          <v-list-item :key="item.id" v-for="item in list6" style="font-size: small;" v-ripple >
            <v-icon>{{item.name}}</v-icon>
            <v-list-item-content class="black--text ml-2">
               {{item.name1}}
            </v-list-item-content>
            <div class="grey--text darken-3 mr-2" style="font-size: x-small;">{{item.name2}}</div>
          </v-list-item>
        </v-list>

        <!-- 底部导航 -->
        <v-bottom-navigation horizontal fixed class="justify-space-between">
          <v-btn >
            <span class="black--text">夜间模式</span>
            <v-icon  >mdi-moon-waxing-crescent</v-icon>
          </v-btn>
          <v-btn>
            <span class="black--text">设置</span>
            <v-icon >mdi-settings</v-icon>
          </v-btn>
          <v-btn>
            <span class="black--text">退出</span>
            <v-icon>mdi-power-standby</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </v-navigation-drawer>


     <!-- 顶部导航 --> 
      <v-app-bar app fixed color="white">
        <v-app-bar-nav-icon @click='show = true'></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <v-toolbar-title v-model='titleid'>
          <v-btn icon>
            我的
          </v-btn>
          <v-btn icon>
            发现
          </v-btn>
          <v-btn icon>
            云村
          </v-btn>
          <v-btn icon>
            视频
          </v-btn>
        </v-toolbar-title>

        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-app-bar>

      <!-- 轮播图 -->
      <v-carousel :show-arrows='false' height="200" class="pb-3" >
        <v-carousel-item contain max-width='100%' max-height='200px'
          src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586410950790&di=0f496712d7bba10999eeba7b921a6b77&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F04%2F20171004222937_2Ze5j.jpeg'
          contain gradient></v-carousel-item>

        <v-carousel-item  max-width='100%' max-height='200px'
          src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1267931373,3662510004&fm=26&gp=0.jpg'>
        </v-carousel-item>

        <v-carousel-item max-width='100%' max-height='200px'
          src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586412998700&di=abf4228532c7f8e1d4a608ee634db257&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F9825bc315c6034a83b19bb4fca13495408237600.jpg'>
        </v-carousel-item>
      </v-carousel>
      
      <!-- 第三行 -->
      <div class="d-flex justify-space-around mt-3 mb-5">

        <div class="d-flex flex-column align-center">
          <v-btn fab dark small class="mb-2">
            <v-icon dark>mdi-calendar</v-icon>
          </v-btn>
          <span style="font-size: xx-small;">每日推荐</span>
        </div>

        <div class="d-flex flex-column align-center">
          <v-btn fab dark small class="mb-2">
            <v-icon>mdi-music</v-icon>
          </v-btn>
          <span style="font-size: xx-small;">歌单</span>
        </div>

        <div class="d-flex flex-column align-center">
          <v-btn fab dark small class="mb-2">
            <v-icon>mdi-history</v-icon>
          </v-btn>
          <span style="font-size: xx-small;">排行榜</span>
        </div>

        <div class="d-flex flex-column align-center">
          <v-btn fab dark small class="mb-2">
            <v-icon>mdi-music-circle-outline</v-icon>
          </v-btn>
          <span style="font-size: xx-small;">电台</span>
        </div>

        <div class="d-flex flex-column align-center">
          <v-btn fab dark small class="mb-2">
            <v-icon>mdi-circular-saw</v-icon>
          </v-btn>
          <span style="font-size: xx-small;">直播</span>
        </div>
      </div>

      <!-- 推荐歌单 -->
      <div class="grey--text lighten-2  ml-4 mt-2" style="font-size: x-small;">
        推荐歌单
      </div>
      <div class="d-flex justify-space-around align-center ml-4 mb-2 mr-3">
        <div class="black--text ">为您精挑细选</div>
        <v-spacer></v-spacer>
        <v-btn rounded x-small color="white"> 查看更多 </v-btn>
      </div>

      <v-slide-group class="ml-3">
        <v-slide-item :key="item.id" v-for='item in list' class="mr-2">
          <v-card flat v-ripple max-width="120">
            <img :src="item.path" width="120" height="120">
            <div style="font-size: xx-small;">{{item.name }}</div>

          </v-card>
        </v-slide-item>
      </v-slide-group>
      <!-- :class="{'ml-4': i == 0, 'ml-2': i > 0 && i < 9, 'mr-4': i==9}" -->


      <!-- 相似艺人 -->
      <div class="grey--text lighten-2  ml-4 mt-4" style="font-size: x-small;">
        相似艺人
      </div>
      <div class="d-flex justify-space-around align-center ml-4 mb-2 mr-3">
        <div class="black--text ">如果你喜欢周深</div>
        <v-spacer></v-spacer>
        <v-btn rounded x-small color="white">
          <v-icon small>mdi-play</v-icon>
          播放全部
        </v-btn>
      </div>
      <!-- 轮播 -->
      <v-carousel height="220" background-color="white" :show-arrows='false' hide-delimiters  light>
        <!-- 1 -->
        <v-carousel-item >
          <v-list>
            <v-list-item :key="item.id" v-for="item in list1" class="mb-2" v-ripple>
              <div max-width="60" max-height="60">
                <v-img width="60" height="60" :src='item.path'>
                </v-img>
              </div>

              <v-list-item-content>
                <v-list-item-title class="d-flex justify-space-center align-center ml-3 ">
                  <div class="black--text mr-2">{{item.name}}</div>
                  <div class="grey--text ml-2 ">-</div>
                  <div class="grey--text ml-2 " style="font-size: x-small;">{{item.name1}}</div>
                </v-list-item-title>
                <v-list-item-subtitle class="grey--text darken-1 ml-3 " style="font-size: x-small;">{{item.sub}}
                  </v-list-item-title>
              </v-list-item-content>

              <v-icon>mdi-play</v-icon>
            </v-list-item>
          </v-list>
        </v-carousel-item>

        <!-- 2 -->
        <v-carousel-item>
          <v-list>
            <v-list-item :key="item.id" v-for="item in list2" class="mb-2" v-ripple>
              <div max-width="60" max-height="60">
                <v-img width="60" height="60" :src='item.path'>
                </v-img>
              </div>

              <v-list-item-content>
                <v-list-item-title class="d-flex justify-space-center align-center ml-3 ">
                  <div class="black--text mr-2">{{item.name}}</div>
                  <div class="grey--text ml-2 ">-</div>
                  <div class="grey--text ml-2 " style="font-size: x-small;">{{item.name1}}</div>
                </v-list-item-title>
                <v-list-item-subtitle class="grey--text darken-1 ml-3 " style="font-size: x-small;">{{item.sub}}
                  </v-list-item-title>
              </v-list-item-content>

              <v-icon>mdi-play</v-icon>
            </v-list-item>
          </v-list>
        </v-carousel-item>
      </v-carousel>


      <!-- 场景推荐 -->
      <div class="grey--text lighten-2  ml-4 mt-2" style="font-size: x-small;">
        场景推荐
      </div>
      <div class="d-flex justify-space-around align-center ml-4 mb-2 mr-3">
        <div class="black--text ">早安 让音乐来唤醒你</div>
        <v-spacer></v-spacer>
        <v-btn rounded x-small color="white"> 查看更多 </v-btn>
      </div>

      <v-slide-group class="ml-3 mb-3">
        <v-slide-item :key="item.id" v-for='item in list3' class="mr-2">

          <v-card flat v-ripple max-width="120" max-height="210">
            <img :src="item.path" width="120" height="120">
            <div style="font-size: xx-small; min-height: 36px;" class="text-2">{{item.name }}</div>

              <v-list>
                <v-list-item style="padding: 0px;  ">
                  <v-list-item-avatar size="15">
                    <v-img :src="item.path1" ></v-img>
                  </v-list-item-avatar>
                  <v-list-item-content>
                    <v-list-item-title class="grey--text" style="font-size: xx-small;">{{item.name1}}</v-list-item-title>
                  </v-list-item-content>
                  <div class="grey--text" style="font-size: xx-small; bottom: 0;">
                    {{item.name2}}
                  </div>
                </v-list-item>
              </v-list>
           
          </v-card>
        </v-slide-item>
      </v-slide-group>


      <!-- 排行榜 -->
      <div class="grey--text lighten-2  ml-4 mt-5" style="font-size: x-small;">
        排行榜
      </div>
      <div class="d-flex justify-space-around align-center ml-4 mb-2 mr-3">
        <div class="black--text ">热歌风向标</div>
        <v-spacer></v-spacer>
        <v-btn rounded x-small color="white">
          <!-- <v-icon small>mdi-play</v-icon> -->
          查看更多
        </v-btn>
      </div>
      <!-- 轮播 -->
      <v-carousel height="270" background-color="white" :show-arrows='false' hide-delimiters  >
        <!-- 1 -->
        <v-carousel-item >
          <v-list color="green" class="ml-3 mr-3" >
            <div class="ma-3 d-flex justify-space-center align-center"  >
                <v-icon>mdi-head-lightbulb</v-icon>
                <div v-ripple>硬地原创音乐榜></div>  
              </div>
            <v-list-item :key="item.id" v-for="item in list1" class="mb-2" v-ripple  >
              <div max-width="40" max-height="40">
                <v-img width="40" height="40" :src='item.path'>
                </v-img>
              </div>

              <v-list-item-content>
                <v-list-item-title class="d-flex justify-space-center align-center ml-3 " >
                  <div class=" mr-2" style="font-size: small;">{{item.name}}</div>
                  <div class=" ml-2 ">-</div>
                  <div class=" ml-2 " style="font-size: x-small;">{{item.name1}}</div>
                </v-list-item-title>
               
              </v-list-item-content>
              <!-- <v-icon x-small v-if="item.name2 == 'mdi-arrow-up'" style="color: red;">
                {{item.name2}}
                </v-icon> -->
                <div >
                  <v-icon x-small v-if="item.name2 == 'mdi-arrow-up'" style="color: red;">{{item.name2}}</v-icon>
                  <v-icon x-small v-else-if="item.name2 == 'mdi-arrow-down'" style="color: cyan;">{{item.name2}}</v-icon>
                  <v-icon x-small v-else>{{item.name2}}</v-icon>
                </div>
              
            </v-list-item>
          </v-list>
        </v-carousel-item>

        <!-- 2 -->
        <v-carousel-item >
          <v-list>
            <div class="ma-3 d-flex justify-space-center align-center"  >
              <v-icon>mdi-fire</v-icon>
              <div v-ripple>云音乐说唱榜></div>
              </div>
            <v-list-item :key="item.id" v-for="item in list4" class="mb-2" v-ripple>
              <div max-width="40" max-height="40">
                <v-img width="40" height="40" :src='item.path'>
                </v-img>
              </div>

              <v-list-item-content>
                <v-list-item-title class="d-flex justify-space-center align-center ml-3 " >
                  <div class=" mr-2" style="font-size: small;">{{item.name}}</div>
                  <div class=" ml-2 ">-</div>
                  <div class=" ml-2 " style="font-size: x-small;">{{item.name1}}</div>
                </v-list-item-title>
               
              </v-list-item-content>

              <div >
                <v-icon x-small v-if="item.name2 == 'mdi-arrow-up'" style="color: red;">{{item.name2}}</v-icon>
                <v-icon x-small v-else-if="item.name2 == 'mdi-arrow-down'" style="color: cyan;">{{item.name2}}</v-icon>
                <v-icon x-small v-else>{{item.name2}}</v-icon>
              </div>
            </v-list-item>
          </v-list>
        </v-carousel-item>  
      </v-carousel>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          show:false,
          i: 0,
          list6:[
            {
              name:'mdi-note-text-outline',
              name1:'我的订单',
            },
            {
              name:'mdi-alarm-note',
              name1:'定时停止播放',
            },
            {
              name:'mdi-credit-card-scan-outline',
              name1:'扫一扫',
            },
            {
              name:'mdi-alarm',
              name1:'音乐闹钟',
            },
            {
              name:'mdi-cloud-outline',
              name1:'音乐云盘',
            },
            {
              name:'mdi-playlist-music-outline',
              name1:'在线听歌免流量',
            },
            {
              name:'mdi-google-fit',
              name1:'优惠券',
            },
            {
              name:'mdi-shield-check-outline',
              name1:'青少年模式',
              name2:'未开启',
              
            },
          ],
          list5:[
            {
              name:'mdi-microphone-outline',
              name1:'听歌识曲',
            },
            {
              name:'mdi-ticket-account',
              name1:'演出',
            },
            {
              name:'mdi-cart-outline',
              name1:'商城',
            },
            {
              name:'mdi-map-marker-outline',
              name1:'附近的人',
            },
            {
              name:'mdi-gamepad-variant-outline',
              name1:'游戏推荐',
            },
            {
              name:'mdi-bell-ring-outline',
              name1:'口袋彩铃',
              name2:'超温柔春日铃声',
              path:'http://img3.imgtn.bdimg.com/it/u=3846062265,3369306646&fm=26&gp=0.jpg'
            },
          ],
          list4: [{
              name: 'Born Like This',
              name1: 'Melo',
              name2:'新',
              path:'http://img0.imgtn.bdimg.com/it/u=3149825656,1762696218&fm=26&gp=0.jpg'
            },
            {
              name: '花花公子',
              name1: '马思',
              name2:'mdi-arrow-down',
              path:'http://img2.imgtn.bdimg.com/it/u=176929752,3027724880&fm=26&gp=0.jpg'
            },
            {
              name: 'Thicky Trick',
              name1: 'NINEONER',
              name2:'新',
              path:'http://img0.imgtn.bdimg.com/it/u=2303525478,2748764422&fm=26&gp=0.jpg '
            }
          ],
          list2: [{
              name: '白羊',
              name1: '徐秉龙/沈以诚',
              sub: '若我熄灭心跳 能否嘚她拥抱',
              path:'http://img4.imgtn.bdimg.com/it/u=3076914696,1981222640&fm=26&gp=0.jpg'
            },
            {
              name: '我的名字',
              name1: '焦迈奇',
              sub: '最大的愿望 就是你能记住我的名字',
              path:'http://img2.imgtn.bdimg.com/it/u=1442038534,817842994&fm=26&gp=0.jpg'
            },
            {
              name: '这一生关于你的风景',
              name1: '隔壁老攀',
              sub: '想陪你走过春夏秋冬 感受爱恨情长',
              path:'http://img0.imgtn.bdimg.com/it/u=2109429096,583354260&fm=26&gp=0.jpg'
            }
          ],
          list1: [{
              name: '生而为人',
              name1: '尚士达',
              name2:'mdi-arrow-up',
              
              path:'http://img5.imgtn.bdimg.com/it/u=1399873556,1230261897&fm=26&gp=0.jpg'
            },
            {
              name: '夜空中最亮的星',
              name1: '逃跑计划',
              name2:'新',
              path:'http://img3.imgtn.bdimg.com/it/u=2711837926,904832573&fm=26&gp=0.jpg'
            },
            {
              name: '平凡之路',
              name1: '（电影）',
              name2:'新',
              path:'http://img5.imgtn.bdimg.com/it/u=2340700250,272333907&fm=26&gp=0.jpg'
            }
          ],
          list: [{
              id: 0,
              path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
              name: '多弗朗明哥'
            },
            {
              id: 1,
              path: './img/0.jpg',
              name: '你笑起来真好看'
            },
            {
              id: 2,
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1884689517,495136699&fm=11&gp=0.jpg',
              name: '像春天的花儿一样'
            },
            {
              id: 3,
              path: 'http://img5.imgtn.bdimg.com/it/u=2287333209,1559367620&fm=11&gp=0.jpg',
              name: '小宝贝快快睡'
            },
            {
              id: 4,
              path: 'http://img0.imgtn.bdimg.com/it/u=1361433311,1491821341&fm=26&gp=0.jpg',
              name: '梦里全都有'
            },
            {
              id: 5,
              path: 'http://img1.imgtn.bdimg.com/it/u=3531200211,861580028&fm=26&gp=0.jpg',
              name: '努力的小透明，总有一天会拥有姓名'
            },
          ],
          list3: [{
              id: 0,
              path: 'http://img4.imgtn.bdimg.com/it/u=2687368603,3794114719&fm=26&gp=0.jpg',
              path1: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
              name: '出发的路上你要听的悦耳旋律',
              name1:'猫...',
              name2:'1111赞',
            },
            {
              id: 1,
              path: './img/0.jpg',
              path1: './img/0.jpg',
              name: '我的宝贝 宝贝 给你一点甜甜',
              name1:'鹤...',
              name2:'1241赞',
            },
            {
              id: 2,
              path: 'http://img3.imgtn.bdimg.com/it/u=1013776215,458646288&fm=26&gp=0.jpg',
              path1: './img/0.jpg',
              name: '让你今夜都好眠',
              name1:'巧克...',
              name2:'211赞',
            },
            {
              id: 3,
              path: 'http://img5.imgtn.bdimg.com/it/u=2854825721,1035605202&fm=26&gp=0.jpg',
              path1: './img/0.jpg',
              name: '我的小鬼 小鬼 逗逗你的眉眼 让你喜欢这世界',
              name1:'云村...',
              name2:'511赞',
            },
            {
              id: 4,
              path: 'http://img5.imgtn.bdimg.com/it/u=1901170174,1502600419&fm=26&gp=0.jpg',
              path1: './img/0.jpg',
              name: '哇啦啦啦啦啦啦我的宝贝 倦的时候有人陪',
              name1:'宝贝...',
              name2:'1123赞',
            },
            {
              id: 5,
              path: 'http://img5.imgtn.bdimg.com/it/u=1313452979,898233240&fm=26&gp=0.jpg',
              path1: './img/0.jpg',
              name: '哎呀呀呀呀呀我的宝贝 要你知道你最美',
              name1:'甜甜...',
              name2:'1111赞',
            },
          ],
          // list4: [{
          //     id: 0,
          //     path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
          //     name: '猫...',
          //     name1:'1111赞'
          //   },
          //   {
          //     id: 1,
          //     path: './img/0.jpg',
          //     name: '鹤...',
          //     name1:'1111赞'
          //   },
          //   {
          //     id: 2,
          //     path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
          //     name: '巧克...',
          //     name1:'292赞'
          //   },
          //   {
          //     id: 3,
          //     path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
          //     name: '云村...',
          //     name1:'11111赞'
          //   },
          //   {
          //     id: 4,
          //     path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
          //     name: '宝贝...',
          //     name1:'1111赞'
          //   },
          //   {
          //     id: 5,
          //     path: 'https://p2.music.126.net/lr3acdt7ck3h2gNXaHjrFw==/109951164760705615.jpg',
          //     name: '甜甜...',
          //     name1:'1111赞'
          //   },
          // ],
          titleid: 0
        }
      },
      
      vuetify: new Vuetify(),
    })
  </script>
</body>

</html>